---
type: tutorial
title: Créez une archive de billets de blog
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Utilisez Astro.glob() pour accéder aux données de fichiers de votre projet
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez quelques billets de blog à lier, configurons la page Blog pour créer automatiquement une liste d'entre eux !

<PreCheck>
  - Accédez aux données de tous vos billets en une fois en utilisant `Astro.glob()`
  - Affichez une liste générée dynamiquement de billets sur votre page Blog
  - Refactorez pour utiliser un composant `<BlogPost />` pour chaque élément de liste
</PreCheck>

## Afficher dynamiquement une liste de billets

<Steps>
1. Ajoutez le code suivant à `blog.astro` pour retourner des informations sur tous vos fichiers Markdown. `Astro.glob()` renverra un tableau d'objets, un pour chaque billet de blog.

    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Poste 1</a></li>
        <li><a href="/posts/post-2/">Poste 2</a></li>
        <li><a href="/posts/post-3/">Poste 3</a></li>
      </ul>
    </BaseLayout>
    ```


2. Pour générer toute la liste de billets dynamiquement, en utilisant les titres et les URL des billets, remplacez vos balises `<li>` individuelles par le code Astro suivant :

    ```astro title="src/pages/blog.astro" del={9,10,11} ins={13}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Poste 1</a></li>
        <li><a href="/posts/post-2/">Poste 2</a></li>
        <li><a href="/posts/post-3/">Poste 3</a></li>

        {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
      </ul>
    </BaseLayout>
    ```

    L'ensemble de votre liste de billets de blog est maintenant généré dynamiquement, en parcourant le tableau renvoyé par `Astro.glob()`.

3. Ajoutez un nouveau billet de blog en créant un nouveau fichier `post-4.md` dans `src/pages/posts/` et en ajoutant un contenu Markdown. Assurez-vous d'inclure au moins les propriétés de frontmatter utilisées ci-dessous.

    ```markdown
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: Mon quatrième billet de blog
    author: Apprenti Astro
    description: "Ce billet apparaîtra tout seul !"
    image: 
      url: "https://docs.astro.build/default-og-image.png"
      alt: "Le mot « astro » sur fond d'illustration de planètes et d'étoiles."
    pubDate: 2022-08-08
    tags: ["astro", "réussites"]
    ---
    Ce billet devrait apparaître avec mes autres billets de blog, car `Astro.glob()` renvoie une liste de tous mes billets pour créer ma liste.
    ```

4. Revisitez votre page de blog dans votre aperçu de navigateur à l'adresse `http://localhost:4321/blog` et recherchez une liste mise à jour avec quatre éléments, y compris votre nouveau billet de blog !
</Steps>

<Box icon="puzzle-piece">

## Défi : Créez un composant BlogPost

Essayez de faire vous-même toutes les modifications nécessaires à votre projet Astro afin de pouvoir utiliser le code suivant pour générer votre liste de billets de blog :

```astro title="src/pages/blog.astro" del={2} ins={3}
<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>
```

<details>
<summary>Cliquez pour voir les étapes</summary>

<Steps>
1. Créez un nouveau composant dans `src/components/`.

    <details>
    <summary>Afficher le nom de fichier</summary>
    ```
    BlogPost.astro
    ```
    </details>

2. Écrivez la ligne de code dans votre composant pour qu'il puisse recevoir un `title` et une `url` en tant que `Astro.props`.

    <details>
    <summary>Afficher le code</summary>
    ```astro
    ---
    // src/components/BlogPost.astro
    const { title, url } = Astro.props;
    ---
    ```
    </details>

3. Ajoutez la mise en forme utilisée pour créer chaque élément de votre liste de billets de blog.

    <details>
    <summary>Afficher le code</summary>
    ```astro
    <!-- src/components/BlogPost.astro -->
    <li><a href={url}>{title}</a></li>
    ```
    </details>

4. Importez le nouveau composant dans votre page de blog.

    <details>
    <summary>Afficher le code</summary>
    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro";
    ---
    ```
    </details>

5. Vérifiez-vous : consultez le code du composant terminé.

    <details>
    <summary>Afficher le code</summary>
    ```astro title="src/components/BlogPost.astro"
    ---
    const { title, url } = Astro.props
    ---
    <li><a href={url}>{title}</a></li>
    ```
    ```astro title="src/pages/blog.astro" ins={3,10}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mon blog d'apprentissage Astro"
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>C'est ici que je vais publier sur mon voyage d'apprentissage d'Astro.</p>
      <ul>
        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
      </ul>
    </BaseLayout>
    ```
    </details>
</Steps>
</details>
</Box>



<Box icon="question-mark">

### Testez vos connaissances

Si votre composant Astro contient la ligne de code suivante : 

```astro
---
const myPosts = await Astro.glob('../pages/posts/*.md');
---
```

Choisissez la syntaxe que vous pourriez écrire pour représenter :

1. Le titre de votre troisième billet de blog.  

    <MultipleChoice>
      <Option>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option isCorrect>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={myPosts[0].url}>Premier billet !!</a>`
      </Option>
    </MultipleChoice>

2. Un lien vers l'URL de votre premier billet de blog. 

    <MultipleChoice>
      <Option>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option isCorrect>
        `<a href={myPosts[0].url}>Premier billet !!</a>`
      </Option>
    </MultipleChoice>

3. Un composant pour chaque billet, affichant la date de sa dernière mise à jour.

    <MultipleChoice>
      <Option isCorrect>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={myPosts[0].url}>Premier billet !!</a>`
      </Option>
    </MultipleChoice>

</Box>

## Liste de vérification

<Box icon="check-list">

<Checklist>
- [ ] Je peux interroger des données à partir de mes fichiers locaux.
- [ ] Je peux afficher une liste de tous mes billets de blog.
</Checklist>
</Box>

### Ressources

- [Documentation de l'API `Astro.glob()`](/fr/reference/api-reference/#astroglob)
